<template>
  <div class="mod-config">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
      <!--<el-form-item>
        <el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input>
      </el-form-item>-->
      <el-form-item>
        <el-select v-model="domainId" placeholder="请选择">
          <el-option v-for="(domain, index) in domainList" :label="domain.name" :value="domain.id"
                     :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
        <el-button
          v-if="isAuth('endogenous:uservmtrustedrel:save')"
          type="primary"
          @click="addOrUpdateHandle()"
          :disabled="dataListSelections.length <= 0"
        >受理
        </el-button>
        <el-button
          v-if="isAuth('endogenous:uservmtrustedrel:delete')"
          type="danger"
          @click="deleteHandle()"
          :disabled="dataListSelections.length <= 0"
        >批量撤销
        </el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%;"
    >
      <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
      <el-table-column prop="vmId" header-align="center" align="center" label="ID"></el-table-column>
      <el-table-column prop="vmName" header-align="center" align="center" label="虚拟机名称"></el-table-column>
      <el-table-column prop="cmpId" header-align="center" align="center" label="虚机IP"></el-table-column>
      <el-table-column prop="trustedRoot" header-align="center" align="center" label="可信根"></el-table-column>
      <el-table-column prop="userId" header-align="center" align="center" label="受理者ID"></el-table-column>
      <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row)">变更</el-button>
          <el-button type="text" size="small" @click="deleteHandle(scope.row.vmId)">撤销</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    <delete v-if="deletedServer" ref="delete" @refreshDataList="getDataList"></delete>
  </div>
</template>

<script>
  import AddOrUpdate from "./uservmtrustedrel-add-or-update";
  import Delete from "./uservmtrustedrel-delete";

  export default {
    data() {
      return {
        dataForm: {
          key: ""
        },
        deletedServer: false,
        domainInfo: {},
        domainId: 1,
        dataList: [],
        domainList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        dataListSelections: [],
        addOrUpdateVisible: false
      };
    },
    components: {
      AddOrUpdate,
      Delete
    },
    activated() {
      this.getDomain();
    },
    methods: {
      getDomain() {
        this.domainMap = {};
        this.$http({
          url: this.$http.adornPortalUrl("/generator/domain/list"),
          method: "get",
          params: this.$http.adornParams({})
        }).then(({data}) => {
          if (data && data.code === 0) {
            let list = data.domains;
            /*if (list.length > 0){
              this.domainId = list[0].domainId;
            }*/
            this.domainId = list[0].domainId;
            for (let i = 0; i < list.length; i++) {
              this.domainInfo[list[i].domainId] = list[i].vms;
              this.domainList.push({
                id: list[i].domainId,
                name: list[i].domainName
              });
            }
          }

        }).finally(() => {
          this.getDataList();
        });
      },
      // 获取数据列表
      getDataList() {
        this.dataListLoading = true;
        this.$http({
          url: this.$http.adornEndogenousUrl("/uservmtrustedrel/list"),
          method: "get",
          params: this.$http.adornParams({
            page: this.pageIndex,
            limit: this.pageSize,
            key: this.dataForm.key
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            let rel = data.page.list;
            let relMap = {};
            for (let i = 0; i < rel.length; i++) {
              relMap[rel[i].vmIdent] = rel[i];
            }

            /*this.dataList = data.page.list;*/
            this.dataList = this.domainInfo[this.domainId];
            for (let i = 0; i < this.dataList.length; i++) {
              if (relMap[this.dataList[i].vmId]) {
                this.dataList[i].userId = relMap[this.dataList[i].vmId].userId;
                this.dataList[i].ip = relMap[this.dataList[i].vmId].cmpId;
                this.dataList[i].trustedRoot =
                  relMap[this.dataList[i].vmId].trustedRoot;
                this.dataList[i].sdnConfigId =
                  relMap[this.dataList[i].vmId].sdnConfigId;
                this.dataList[i].policyConfigId =
                  relMap[this.dataList[i].vmId].policyConfigId;
              }
            }
          } else {
            this.dataList = [];
            this.totalPage = 0;
          }
          this.dataListLoading = false;
        });
      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val;
        this.pageIndex = 1;
        this.getDataList();
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageIndex = val;
        this.getDataList();
      },
      // 多选
      selectionChangeHandle(val) {
        this.dataListSelections = val;
      },

      // 新增 / 修改
      addOrUpdateHandle(row) {
        var ids = [];
        var isAdd = 1; //1：增加，2:修改
        console.log(JSON.stringify(row));
        if (row) {
          ids = [row.id];
          isAdd = 2;
        } else {
          this.dataListSelections.forEach(item => {
            if (!item.trustedRoot) {
              ids.push(item.vmId);
            }
          });
        }
        if (ids.length < 1) {
          this.$message({
            message: "请选择未进行受理过的服务",
            type: "warning",
            duration: 1500
          })
        } else {
          this.addOrUpdateVisible = true;
          this.$nextTick(() => {
            this.$refs.addOrUpdate.init(ids, this.domainId, isAdd, row);
          });
        }
      },
      // 删除
      deleteHandle(id) {
        var ids = id
          ? [id]
          : this.dataListSelections.map(item => {
            return item.vmId;
          });

        this.deletedServer = true;

        this.$nextTick(() => {
          this.$refs.delete.init(ids);
        });
      }
    }
  };
</script>
